<template>
  <div>
    <div class="step"><span>首页</span> > 订单管理 > 订单列表</div>
    <!-- 搜索 -->
    <el-card>
      <div>
        <el-input
          placeholder="请输入内容"
          v-model="inputVal"
          class="input-with-select"
        >
          <el-button
            @click="search()"
            slot="append"
            icon="el-icon-search"
          ></el-button>
        </el-input>
      </div>
      <!-- prefix-icon="el-icon-search" 该属性可以在input框内添加icon -->
    </el-card>
    <!-- table -->
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="order_id" label="#" width="100"> </el-table-column>
      <el-table-column prop="order_number" label="订单编号" width="250">
      </el-table-column>
      <el-table-column prop="order_price" label="订单价格" width="110">
      </el-table-column>
      <el-table-column prop="pay_status" label="是否付款" width="110">
        <span>{{ changeChinese }}</span>
      </el-table-column>
      <el-table-column prop="is_send" label="是否发货" width="110">
      </el-table-column>
      <el-table-column prop="create_time" label="下单时间" width="170">
      </el-table-column>

      <el-table-column prop="todo" label="操作" width="200">
        <template slot-scope="scope">
          <div>
            <el-button
              icon="el-icon-edit"
              type="primary"
              size="mini"
              circle
              @click="editUser(scope.row)"
            >
            </el-button>
            <el-button
              icon="el-icon-location"
              type="success"
              size="mini"
              circle
              @click="openDialog(scope.row.id)"
            >
              <!-- scope 是一个特殊的对象，它代表当前行的数据和其他相关信息。
              在这个代码中，scope.$index 表示当前行的索引，即该行数据在表格数据数组中的位置。 -->
            </el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      background
      :current-page="currentPage"
      :total="10"
      :page-size="pageSize"
      :page-sizes="[5, 10, 15, 20]"
      layout="total, sizes, prev, pager, next, jumper"
    >
    </el-pagination>
  </div>
</template>

<script>
import request from '@/utils/request'
export default {
  mounted () {
    this.getOrderList()
  },
  data () {
    return {
      tableData: [
        // { id: 1, order_number: 1, order_price: 1, pay_status: true, is_send: true, create_time: 1 }
      ],
      form: {
        order_number: '',
        order_price: '',
        pay_status: true,
        is_send: true,
        create_time: ''
      },
      inputVal: '',
      currentPage: 1,
      pageSize: 5,
      pageObj: {
        // 分页所需要的参数
        account: '',
        pagenum: 1,
        pagelen: 5 // 每页显示条数
      }
    }
  },
  computed: {
    changeChinese () {
      return this.form.pay_status === 0 ? '未付款' : '已付款'
    }
  },
  methods: {
    getOrderList () {
      request
        .get('orders', {
          params: {
            pagenum: this.pageObj.pagenum,
            pagesize: this.pageObj.pagelen
          }
        })
        .then((res) => {
          console.log(res)
          const { data } = res
          if (data.meta.status === 200) {
            this.$message.success('获取成功')
            this.tableData = data.data.goods
          }
        })
        .catch((err) => {
          console.log(err)
        })
    }
    // handleSizeChange (val) {
    //   this.pageSize = val
    // },
    // handleCurrentChange (val) {
    //   this.currentPage = val
    //   // 在data中声明变量currentPage，pageSize，分别为默认页，以及默认尺寸。
    // }
  }
}
</script>

<style scoped lang="scss">
@size-change= "handleSizeChange"
      @current-change="handleCurrentChange"
/* table */
.el-button {
  width: 80px;
  line-height: 30px;
  padding: 0px;
}
.el-input {
  float: left;
  width: 200px;
}
.el-table .el-button {
  width: 50px;
}
.is-always-shadow {
  height: 78px;
  margin-top: 0px;
  box-shadow: 0 0px 0 rgba(0, 0, 0) !important;
}
/* table */
.el-pagination {
  margin-top: 20px;
  text-align: center !important;
}
.step {
  width: 300px;
  height: 40px;
  margin-left: -50px;
  span {
    font-weight: bold;
  }
}
// el-card
.el-button {
  width: 80px;
  line-height: 30px;
  padding: 0px;
}
.el-card .el-button:nth-of-type(2) {
  float: right;
  width: 40px;
}
.el-input {
  float: left;
  width: 200px;
}
.el-card .el-input .el-button {
  margin-top: -15px;
  width: 40px;
}
// el-card
</style>
